<template>
    <!-- 上左右结构 -->
    <div>
        <div class="top">
            <h3>八维智慧酒店</h3>
            <input type="button" value="退出登录" class="btn btn-danger" @click="login">
        </div>
        <div class="box">
            <div class="left">
                <nav>
                    <ul>
                        <!-- <li>
                            <RouterLink to="/memberadd">会员增加</RouterLink>
                        </li>
                        <li>
                            <RouterLink to="/memberList">会员列表</RouterLink>
                        </li>
                        <li>
                            <RouterLink to="/shopadd">门店增加</RouterLink>
                        </li>
                        <li>
                            <RouterLink to="/listshop">门店列表</RouterLink>
                        </li>
                        <li>
                            <RouterLink to="/housetypeadd">房型增加</RouterLink>
                        </li>
                        <li>
                            <RouterLink to="/housetypelist">房型列表</RouterLink>
                        </li>
                        <li>
                            <RouterLink to="/housenoadd">房号增加</RouterLink>
                        </li>
                        <li>
                            <RouterLink to="/housenolist">房号列表</RouterLink>
                        </li>
                        <li>
                            <RouterLink to="/houserowadd">排房增加</RouterLink>
                        </li>
                        <li>
                            <RouterLink to="/houserowlist">排房列表</RouterLink>
                        </li>
                        <li>
                            <RouterLink to="/houseplanadd">房价计划增加</RouterLink>
                        </li> -->
                        <!-- <RouterLink :to="item.path">{{ item.name }}</RouterLink> -->
                        <!-- :class="点击路径 == item.path ? 'active' : ''"  -->
                        <li v-for="item in routes" @click="gopage(item.path)"
                            :class="route.fullPath == item.path ? 'active' : ''">{{ item.name }} </li>
                    </ul>
                </nav>
            </div>
            <div class="right">
                <RouterView />
            </div>
        </div>

    </div>
</template>

<script setup lang="ts">
import { ref, reactive, onMounted } from 'vue'
import axios from 'axios'
//导入路由器对象对象的方法
import { useRouter, useRoute } from 'vue-router';
//创建一个路由器对象  可以实现页面跳转 push可以实现页面跳转
const router = useRouter();
const route = useRoute();
import { useUserStore } from '@/stores/User'
const abc = useUserStore();
const login = () => {
    router.push('/login');
    abc.userInfo = {};
}
const gopage = (url: any) => {
    router.push(url);
    console.log(route.fullPath);

}
let routes: any = ref([
    {
        name: '会员增加',
        path: '/memberadd'
    },
    {
        name: '会员列表',
        path: '/memberList'
    },
    {
        name: '门店增加',
        path: '/shopadd'
    },
    {
        name: '门店列表',
        path: '/listshop'
    },
    {
        name: '房型增加',
        path: '/housetypeadd'
    },
    {
        name: '房型列表',
        path: '/housetypelist'
    },
    {
        name: '房号增加',
        path: '/housenoadd'
    },
    {
        name: '房号列表',
        path: '/housenolist'
    },
    {
        name: '排房增加',
        path: '/houserowadd'
    },
    {
        name: '排房列表',
        path: '/houserowlist'
    },
    {
        name: '房价计划增加',
        path: '/houseplanadd'
    },
])
</script>

<style scoped>
.top {
    background-color: rgba(123, 246, 0, 0.307);
    display: flex;
    justify-content: space-between;
    height: 60px;
    align-items: center;
    padding: 0 20px;
}

ul {
    list-style: none;
}

li {
    line-height: 30px;
    text-align: center;
}

li a {
    color: #fff;
}

.box {
    display: flex;
    min-height: calc(100vh - 60px);
}

.left {
    width: 200px;
    background-color: rgb(73, 69, 69);
}

.right {
    flex: 1;
    background-color: rgb(220, 227, 223);
    padding: 0 10px;
}

/* active表示激活的样式  是有条件的 */
.active {
    background-color: rgb(197, 36, 36);
    color: #fff;
}
</style>